* {
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
  }
  
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: center;
    flex-wrap: wrap;
    align-content: center;
    font-family: 'Open Sans', sans-serif;
    background: linear-gradient(45deg, #222, #333);
  }

.box {
    margin: 16px;
    padding: 4px;
    background-color: #e7e7e7;
    width: 104px;
    height: 104px;
    object-fit: contain;
    box-shadow:
      inset 0 5px white, 
      inset 0 -5px #bbb,
      inset 5px 0 #d7d7d7, 
      inset -5px 0 #d7d7d7;
    border-radius: 10%;
  }
  
  .pip {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: 4px;
  
    background-color: #333;
    box-shadow: inset 0 3px #111, inset 0 -3px #555;
  }

  .first{
    display: flex;
    justify-content: center;
    align-items: center;
}

.second {
    display: flex;
    justify-content: space-between;
}
.second .pip:nth-of-type(2){
    align-self: flex-end;
}
.third{
    display: flex;
}
.third .pip:nth-of-type(2){
    align-self: center;
}
.third .pip:nth-of-type(3){
    align-self: flex-end;
}
.fourth,.sixth{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.sixth .column,.fourth .column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.fifth{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
}
.fifth .column{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}
.fifth .column:nth-of-type(2){
    justify-content: center;
}
/**
    flex 伸缩盒布局

    flex-direction 主轴的方向 row | row-reverse | column | column-reverse
    flex-wrap 元素单行显示还是多行显示 nowrap | wrap | wrap-reverse
    flex-flow flex-direction和flex-wrap的简写

    align-items 交叉轴对齐方式
        基础关键字
        align-items: normal;
        align-items: stretch; 填充满对齐
        位置对齐方式
        align-items: center;  
        align-items: start; 
        align-items: end;  
        align-items: flex-start;
        align-items: flex-end;
        align-items: self-start;
        align-items: self-end;
        基线对齐方式
        align-items: baseline;
        align-items: first baseline;
        align-items: last baseline;
        align-items: safe center;
        align-items: unsafe center;
    
    align-content 多根轴线的对齐方式，单行弹性盒子模型无效
        align-content: center;    
        align-content: start;      
        align-content: end;        
        align-content: flex-start; 
        align-content: flex-end;
        align-content: space-between;
        align-content: space-around;
        align-content: space-evenly;
        align-content: stretch;
        align-content: baseline;
        align-content: first baseline;
        align-content: last baseline;

    order 项目的排列顺序,数值越小，排列越靠前，默认为0。
    flex-grow 定义弹性盒子项放大比例。负值无效。
    flex-shrink 定义弹性盒子项收缩比例。负值无效。
    flex-basis 主轴多余空间分配，content-box的尺寸
        flex-basis: 10em;
        flex-basis: 3px;
        flex-basis: auto;
        flex-basis: fill;
        flex-basis: max-content;
        flex-basis: min-content;
        flex-basis: fit-content;

    flex 是flex-grow,flex-shrink,flex-basis的简写，
        默认值为0 1 auto。后两个属性可选。
        该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

    align-self 单个项目与其他项目不一样的对齐方式，覆盖已有的align-items的值，
        默认值为auto，其他值与align-items相同
    
*/